<template>
  <el-main>
    <el-row :gutter="15">
      <el-col :lg="8">
        <el-card
          shadow="never"
          header="脉冲圆点"
        >
          <el-space
            wrap
            :size="15"
          >
            <sc-status-indicator
              pulse
              type="primary"
            />
            <sc-status-indicator
              pulse
              type="success"
            />
            <sc-status-indicator
              pulse
              type="warning"
            />
            <sc-status-indicator
              pulse
              type="danger"
            />
            <sc-status-indicator type="info" />
          </el-space>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card
          shadow="never"
          header="趋势"
        >
          <el-space
            wrap
            :size="15"
          >
            <sc-trend
              v-model="trendValue"
              prefix="¥"
            />
            <sc-trend v-model="trendValue2" />
            <sc-trend
              v-model="trendValue3"
              suffix="%"
            />
          </el-space>

          <p style="margin-top: 15px; color: #999">
            设置reverse可反转颜色。
          </p>
        </el-card>
      </el-col>
      <el-col :lg="8">
        <el-card shadow="never">
          <div class="up">
            <h2>持续更新中...</h2>
            <p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
            <p>原子组件库位置：@/components/scMini/*</p>
            <el-button
              type="primary"
              text
              @click="goIssue"
            >
              提交想法
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: "Minivab",
  data() {
    return {
      trendValue: 4.6,
      trendValue2: 0,
      trendValue3: -32,
    };
  },
  mounted() {},
  methods: {
    goIssue() {
      window.open("https://gitee.com/lolicode/scui/issues");
    },
  },
};
</script>

<style scoped>
.up {
  text-align: center;
}
.up h2 {
  margin-bottom: 10px;
}
.up p {
  color: #999;
  line-height: 1.5;
}
.el-card {
  height: 150px;
}
</style>
